<template>
  <div class="container">
    <div class="top">
      <div>使用指南</div>
      <div>
       欢迎您,{{ userName }}
      </div>
      <div>
        <el-button type="text" @click="logout">退出登录</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <el-menu default-active="/home" class="el-menu-vertical-demo" router
          background-color="transparent" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/home">
            <span slot="title">实时资讯</span>
          </el-menu-item>
          <el-menu-item index="/survey">
            <span slot="title">用户倾向性调查</span>
          </el-menu-item>
          <el-menu-item index="/advisor">
            <span slot="title">投顾建议</span>
          </el-menu-item>
          <el-menu-item index="/earnings">
            <span slot="title">目前收益状况</span>
          </el-menu-item>
          <el-menu-item index="/admin">
            <span slot="title">个人信息</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      userName:localStorage.getItem('nickname')
    }
  },

  methods:{
    logout(){
      //全部移除localStorage
      localStorage.clear()
      axios({
        method:'get',
        url:'/usr/logout'
      }).catch(err=>console.log(err))
      this.$router.push('/')
    }
  }

}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .top{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
     height: 80px;
     color: #fff;

     &>div{
      margin-right: 20px;
     }
  }

  .bottom{
    flex: 1;
    margin-top: 20px;
    display: flex;
  .right {
    flex: 1;
    background-color: #fff;
  }

  .left {
    background-color: transparent;

    .el-menu {
      border: 0;
      margin-left: 30px;
    }
  }
  }

  .el-button{
    translate: 0px 1.5vh;
  }
}
</style>